<template>
  <div id="createQuestionView">
    <h1>新增问题</h1>
    <a-form :model="form" layout="vertical">
      <a-form-item field="size" label="配置方式">
        <a-radio-group v-model="easyConfig" type="button">
          <a-radio :value="true">简易配置</a-radio>
          <a-radio :value="false">全面配置</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item field="title" label="题目">
        <a-input v-model="form.title" placeholder="请输入问题题目" />
      </a-form-item>
      <a-form-item field="tags" label="标签" v-if="!easyConfig">
        <a-input-tag v-model="form.tags" placeholder="请输入标签" />
      </a-form-item>
      <a-form-item field="content" label="内容">
        <MdEditor
          :value="form.content"
          :handle-change="handleChangeContent"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item field="answer" label="参考答案" v-if="!easyConfig">
        <MdEditor
          :value="form.answer"
          :handle-change="handleChangeAnswer"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item field="judgeConfig" label="判题配置" v-if="!easyConfig">
        <a-input-number
          v-model="form.judgeConfig.timeLimit"
          :style="{ width: '270px', marginRight: '20px' }"
          placeholder="请输入运行时间限制(ms)"
          allow-clear
        >
          <template #prepend>
            <div>时间限制(ms)</div>
          </template>
        </a-input-number>
        <a-input-number
          v-model="form.judgeConfig.memoryLimit"
          :style="{ width: '270px', marginRight: '20px' }"
          placeholder="请输入内存限制(kb)"
          allow-clear
        >
          <template #prepend>
            <div>内存限制(kb)</div>
          </template>
        </a-input-number>
        <a-input-number
          v-model="form.judgeConfig.stackLimit"
          :style="{ width: '270px' }"
          placeholder="请输入运行堆栈限制限制(kb)"
          allow-clear
        >
          <template #prepend>
            <div>堆栈限制(kb)</div>
          </template>
        </a-input-number>
      </a-form-item>
      <a-form-item
        v-for="(item, index) of form.judgeCase"
        :field="`judgeCase[${index + 1}].value`"
        :label="`问题案例-${index + 1}`"
        :key="index"
      >
        <a-space direction="horizontal" fill>
          <a-form-item field="input">
            <a-input v-model="item.input" placeholder="请输入输入案例" />
          </a-form-item>
          <a-form-item field="output">
            <a-input v-model="item.output" placeholder="请输入输出案例" />
          </a-form-item>
          <a-form-item field="button">
            <icon-close @click="handleDelete(index)" />
          </a-form-item>
        </a-space>
      </a-form-item>
      <div>
        <a-button @click="handleAdd">新增案例</a-button>
      </div>
      <a-divider :size="0" />
      <a-form-item>
        <a-button
          type="primary"
          shape="round"
          style="width: 300px"
          @click="handleAddQuestion"
          >添加
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { QuestionAddRequest, QuestionControllerService } from "@/api";
import MdEditor from "@/components/MdEditor.vue";
import message from "@arco-design/web-vue/es/message";

const easyConfig = ref<boolean>(true);
const form = ref<QuestionAddRequest>({
  judgeCase: [],
  judgeConfig: {
    timeLimit: 1000,
    memoryLimit: 1000,
    stackLimit: 1000,
  },
});
const handleAdd = () => {
  form.value.judgeCase.push({
    input: "",
    output: "",
  });
};
const handleDelete = (index) => {
  form.value.judgeCase.splice(index, 1);
};
const handleChangeContent = (v: string) => {
  form.value.content = v;
};
const handleChangeAnswer = (v: string) => {
  form.value.answer = v;
};

const handleAddQuestion = async () => {
  const res = await QuestionControllerService.addQuestionUsingPost(form.value);
  if (res.code === 0) {
    message.success("新增成功");
  } else {
    message.error("新增失败" + res.message);
  }
};
</script>

<style scoped>
#createQuestionView {
  max-width: 800px;
  margin: 0 auto;
}
</style>
